<template>
  <div ref="reportCardRef" class="report_card">
    <div class="card_title">{{ info.title }}</div>
    <div class="card_content">
      <div class="card_top">
        <div class="card_top_num">{{ info.num }}</div>
        <div class="card_top_import">
          重要
          {{ info.import }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReportCard',
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  }

};
</script>

<style lang='scss' scoped>
  $vw:1920;
  /*像素转换相对单位vw*/
  @function px2vw($px) {
    @return $px / $vw * 100vw;
  }
  .report_card{
    width: px2vw(530);
    height: px2vw(330);
    background-color: #fff;
    border-radius: 4px;
    .card_title{
      font-family: PingFangSC, PingFangSC-Medium;
      height: px2vw(40);
      line-height: px2vw(40);
      color: #333333;
      font-size: px2vw(18);
      background: #99cbf9;
      padding-left: px2vw(20);
    }
    .card_content{
      padding: 0 px2vw(20);
      .card_top{
        height: px2vw(60);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .card_top_num{
          font-size: px2vw(16);
          font-family: ArialMT, ArialMT-Regular;
          font-weight: 400;
          color: #1492ff;
        }
        .card_top_import{
          font-size: px2vw(14);
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
</style>
